<style lang="less" scoped>
    @import url('../../less/_variable.less');

    .weui-wepay-flow, .weui-wepay-flow-auto {
        width: 2rem;
    }

    .weui-wepay-flow__li_done {
        color: @c_lordColor;
    }

    .header_box {
        width: 100%;
        background: @c_white;
        display: flex;
        flex-direction: row;
        .commodity_log {
            img {
                width: 1.4rem;
                margin: 0.4rem 0 0.4rem 0.46rem;
                border: 1px solid #eeeeee;
            }
        }
        .logistics_status {
            display: flex;
            flex-direction: row;
            margin: 0.4rem 0 0.4rem 0.16rem;

            .logistics_box {
                li {
                    margin-top: 0.2rem;
                    color: @c_gray;
                }
                li:first-child {
                    color: #222;
                }
            }
            .status_box {
                li {
                    margin-top: 0.2rem;
                    color: @c_gray;
                }
                li:first-child {
                    color: #FDB82C;
                }
            }
        }
    }

    .timeline-demo {
        width: 100%;
        background: #fff;
        margin-top: 0.24rem;
        p {
            color: #b2b2b2;
            font-size: 0.24rem;
            margin: 0.1rem;
        }
        h4 {
            color: #b2b2b2;
            font-weight: normal;
            font-size: 0.28rem;
        }
        .recent {
            color: #FDB82C;
        }
    }

</style>
<style>
    .vux-timeline{
        padding:1rem 1rem 0!important;
    }
</style>
<template>
    <div>
        <v-header>
            <div slot="left" class="backs_icon">
            </div>
        </v-header>
        <div class="main_allScroll" :style="news.hasOwnProperty('Status') ? {}: {background: '#fff'}">
            <scroller>
            <div class="header_box">
                <div class="commodity_log">
                    <img v-lazy="{src:mainImage}" alt="">
                </div>
                <div class="logistics_status">
                    <ul class="logistics_box">
                        <li>物流状态：</li>
                        <li>承运来源：</li>
                        <li>运单编号：</li>
                    </ul>
                    <ul class="status_box">
                        <li>{{news.status ? '已到达' : '运输中'}}</li>
                        <li>{{news.company}}</li>
                        <li>{{news.no}}</li>
                    </ul>
                </div>
            </div>
            <div class="line_box">
                <div class="noBusiness" v-if="!news.hasOwnProperty('status') && news.list || news.list == null || news.list == []">
                    <div style="height:0.2rem;background: #F0F4F7;width:100%;margin-bottom: 2rem;"></div>
                    <div class="logistics_null_icon" style="margin-bottom: 0.64rem;"></div>
                    <span>暂无物流信息</span>
                </div>
                <div class="timeline-demo" v-else>
                    <timeline>
                        <timeline-item v-for="(v, i) in news.list" :key="i">
                            <h4 :class="[i === 0 ? 'recent' : '']">{{v.remark}}</h4>
                            <p :class="[i === 0 ? 'recent' : '']">{{v.datetime}}</p>
                        </timeline-item>
                    </timeline>
                </div>
            </div>
            </scroller>

        </div>
    </div>
</template>
<script>
    import {Timeline, TimelineItem, XButton} from 'vux'
    import {mapState} from 'vuex'

    export default {
        components: {
            Timeline,
            TimelineItem,
            XButton
        },
        data() {
            return {
                news: {
                    list : []
                },
                mainImage: ''
            }
        },
        activated: function () {
            this.news = {list : []}
            this.mainImage = this.$route.query.mainImage || ''
            this.$ajax.order.logistics({orderId: this.$route.query.orderId})
                .then(res => {
                    if(res.body.content != null){
                        this.news = res.body.content || {list: []}
                    } else {
                        this.news = {list : []}
                    }
                })
        }
    }
</script>

